<template>
	<el-dialog
		:title="title"
		v-elDragDialog
		:visible.sync="dialogVisible"
		append-to-body
		:show-close="false"
		:close-on-press-escape="false"
		:close-on-click-modal="false"
		custom-class="pageUploaderPop"
		:before-close="handleClose"
	>
		<div class="inner">
			<div class="head">
				<div class="left">
					<span>上传检测报告</span>
				</div>
			</div>
			<div class="body">
				<div class="title">{{ initData.name }} - 报告</div>
				<uploader2 :initData="initData" v-model="fileList"></uploader2>
			</div>
			<div class="foot">
				<el-button @click="qx" type="text" class="foot-button-1">取消</el-button>
				<el-button :loading="sub_load" @click="shangchuan" icon="el-icon-success" class="foot-button-2">上传提交</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import elDragDialog from '@/directives/el-drag-dialog'; // base on element-ui
import uploader2 from '@/components/common/uploader2';
export default {
	components: { uploader2 },
	props: {
		title: {
			type: String,
			default: ''
		}
	},
	name: 'pageUploaderPop',
	data() {
		return {
			dialogVisible: false,
			sub_load: false,
			fileList: [],
			form: {},
			initData: {}
		};
	},
	computed: {},
	watch: {},
	created() {},
	methods: {
		shangchuan() {
			
			let pdf_path = [];
			if (this.fileList.length === 0) {
				alertErr('请先上传报告');
				return;
			}

			pdf_path = this.fileList.map((v) => v.url);
			this.sub_load = true;
			this.$api(
				'check/device_report/create',
				{
					device_id: this.initData.id,
					check_id: this.$route.query.check_id,
					user_id: this.$route.query.user_id,
					pdf_path
				},
				'post'
			).then((res) => {
				this.sub_load = false;
				if (res.code == 200) {
					alertSucc('提交成功');
					this.handleClose();
					this.$parent.init();
				}
			});
		},
		qx() {
			this.dialogVisible = false;
		},
		init(data) {
			this.dialogVisible = true;
			if (data) {
				this.initData = { ...data };
				console.log({ ...data }, '----data');
				let pdf_urls = this.initData.pdf_urls
				this.fileList = pdf_urls.map(v=>{
					let name = v.split('/').pop();
					return{
						name,
						url:v
					}
				})
				// this.form = { ...data };
			}
			this.$nextTick(() => {});
		},

		onSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
				}
			});
		},
		handleClose() {
			this.$emit('change');
			this.$emit('handleClose');
			this.form = {};
			this.dialogVisible = false;
		}
	},
	directives: { elDragDialog }
};
</script>

<style lang="less">
.pageUploaderPop {
	width: fit-content !important;
	border-radius: 8px;
	overflow: hidden;
	.el-dialog__header {
		// .bor();
		padding: 0;
	}
	.el-dialog__body {
		padding: 0;
		// max-height: 70vh;
		overflow-y: auto;
	}
	.inner {
		position: relative;
		width: 614px;
		// height: 461px;
		background: #ffffff;
		border-radius: 10px;
		.head {
			position: sticky;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			height: 94px;
			padding: 0 36px;
			background: #fafafa;
			.left {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 18px;
				color: #333333;
				&:before {
					content: '';
					display: inline-block;
					width: 8px;
					height: 21px;
					background: linear-gradient(215deg, #ff9504 0%, #ff7703 39%, #ff5c02 100%);
					border-radius: 4px;
					margin-right: 13px;
				}
			}
		}
		.body {
			padding: 32px 57px;
			.title {
				font-weight: bold;
				font-size: 18px;
				padding-bottom: 25px;
				color: #333333;
			}
		}
		.foot {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 20px;
			.foot-button-1 {
				margin-right: 36px;
				font-weight: bold;
				font-size: 16px;
				color: #999999;
				font-style: normal;
			}
			.foot-button-2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160px;
				height: 54px;
				background: #fc5f10;
				border-radius: 10px;
				// border: 1px solid #FFFFFF;

				font-weight: bold;
				font-size: 16px;
				color: #ffffff;
				font-style: normal;
			}
		}
	}
}
</style>
